<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <title>二维码生成-带LOGO</title>
</head>

<body >

<div class="page" id="app">
    <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入二维码内容[http(s)链接或者文字]"
            v-model="content">
    </el-input>
    <el-upload
            class="upload-demo"
            drag
            action=""
            multiple
            :http-request="uploadHttpRequest"
    >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.0-alpha.4/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    let vue = new Vue({
        el:"#app",
        data:{
            content: ''
        },
        methods:{

            /*handle_success(res) {
                console.log(res)
            },*/

            //自定义上传方法
            uploadHttpRequest(param) {
                if (this.content == '') {
                    alert("请先输入内容")
                    return
                }
                console.log(param.file);//查看是否选取到文件
                let formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
                formData.append("file", param.file); //添加文件对象
                formData.append("content", this.content);
                axios.post('/zing/image/createImageQRCodeForWeb',formData,{
                    headers: {
                        "Content-Type": "multipart/form-data",//配置header，我们上传的文件编码格式就是multipart/form-data
                    },
                    responseType: "blob"
                }).then((res)=>{
                    console.log(res)
                    var fileName = new Date().getTime() + ".png"
                    this.download(res.data,fileName)
                })
            },

            download (data,filename) {
                var ele = document.createElement('a');// 创建下载链接
                ele.download = filename;//设置下载的名称
                ele.style.display = 'none';// 隐藏的可下载链接
                // 字符内容转变成blob地址
                var blob = new Blob([data]);
                console.log(blob)
                ele.href = URL.createObjectURL(blob);
                // 绑定点击时间
                document.body.appendChild(ele);
                ele.click();
                // 然后移除
                document.body.removeChild(ele);
            }
        }
    });

</script>

<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>

</body>
<style>
    .page{
        text-align: center;
    }

</style>
</html>